<%@ page import="com.xdwanj.util.ConstantsStr" %>
<%@ page import="com.xdwanj.util.PageBean" %>
<%@ page import="com.xdwanj.pojo.Commodity" %>
<%@ page import="com.xdwanj.util.UrlUtil" %>
<%@ page import="com.xdwanj.servlet.ShopServlet" %>
<%@ page import="com.xdwanj.servlet.CommodityServlet" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@include file="/jsp/common/head.jsp" %>


<div class="container">
    <div class="row mh-content">

        <%--左边栏--%>
        <div class="mh-content-left col-xs-2">
            <!--功能区-->
            <div class="mh-content-function-wrap col-xs-12">
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation" id="mh-recommend"><a
                            href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING, new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST, ShopServlet.CAID, "0"})%>"
                    >猜你喜欢</a></li>
                    <li role="presentation" id="mh-food"><a
                            href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING, new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST, ShopServlet.CAID, Commodity.FOOD_CAID})%>"
                    >食品</a>
                    </li>
                    <li role="presentation" id="mh-live"><a
                            href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING, new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST, ShopServlet.CAID, Commodity.LIVE_CAID})%>"
                    >生活用具</a>
                    </li>
                    <li role="presentation" id="mh-clothing"><a
                            href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING, new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST, ShopServlet.CAID, Commodity.CLOTHING_CAID})%>"
                    >宠物服饰</a>
                    </li>
                    <li role="presentation" id="mh-toy"><a
                            href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING, new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST, ShopServlet.CAID, Commodity.TOY_CAID})%>"
                    >宠物玩具</a>
                    </li>

                    <li role="presentation" id="mh-offline"><a
                            href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING, new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST, ShopServlet.CAID, Commodity.OFFLINE_CAID})%>"
                    >线下服务</a>
                    </li>
                    <li role="presentation" id="mh-other"><a
                            href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING, new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST, ShopServlet.CAID, Commodity.OTHER})%>"
                    >其他</a>
                    </li>
                </ul>
            </div>
        </div>

        <%--列表区--%>
        <div class="col-xs-10" id="mh-content-item-padding-change">
            <%--搜索功能--%>
            <div class="input-group col-xs-12">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                    <button class="btn btn-default  glyphicon glyphicon-search" type="button"></button>
                </span>
            </div>
            <div class="mh-content-item-wrap col-xs-12">

                <%--轮播图 这里不用在class中添加col-xs 属性，会添加外边距--%>
                <div class="carousel-wrap" id="mh-carousel">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <%--@elvariable id="bannerList" type="com.xdwanj.util.PageBean"--%>
                            <c:if test="${bannerList != null}">
                                <c:forEach items="${bannerList.content}" var="banner" varStatus="status">
                                    <c:if test="${status.index == 0}">
                                        <a href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(PageServlet.REQUEST_MAPPING, new String[]{PageServlet.POSITION, PageServlet.COMMODITY})%>&coid=${banner.commodity.id}"
                                           class="item active">
                                            <img id="banner-item" class="img-responsive"
                                                 src="${pageContext.request.contextPath}${banner.img}"
                                                 alt="${banner.commodity.name}">
                                            <div class="carousel-caption">
                                                    ${banner.commodity.name}
                                            </div>
                                        </a>
                                    </c:if>
                                    <c:if test="${status.index != 0}">
                                        <a href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(PageServlet.REQUEST_MAPPING, new String[]{PageServlet.POSITION, PageServlet.COMMODITY})%>&coid=${banner.commodity.id}"
                                           class="item">
                                            <img id="banner-item" class="img-responsive"
                                                 src="${pageContext.request.contextPath}${banner.img}"
                                                 alt="${banner.commodity.name}">
                                            <div class="carousel-caption">
                                                    ${banner.commodity.name}
                                            </div>
                                        </a>
                                    </c:if>

                                </c:forEach>
                            </c:if>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" role="button"
                           data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button"
                           data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>

                <%--商品列表--%>
                <div class="mh-content-list-wrap row">
                    <%--@elvariable id="commodityList" type="com.xdwanj.util.PageBean"--%>
                    <c:if test="${commodityList.content.size() != 0}">
                        <c:forEach items="${commodityList.content}" var="commodity">
                            <div class="col-md-4">
                                <a class="thumbnail"
                                   href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(PageServlet.REQUEST_MAPPING,
                                   new String[]{PageServlet.POSITION, PageServlet.COMMODITY})%>&coid=${commodity.id}">
                                    <img src="${pageContext.request.contextPath}${commodity.pictureList.get(0).image}"
                                         alt="shop_item">
                                    <div class="caption">
                                        <h3>${commodity.name}</h3>
                                        <h5>价格：￥${commodity.price}</h5>
                                    </div>
                                </a>

                            </div>
                        </c:forEach>
                    </c:if>

                </div>

                <c:if test="${commodityList != null}">
                    <nav>
                        <ul class="pagination">
                            <li>
                                <a href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING,
                                new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST})%>&caid=${caid}&currentPageNo=${commodityList.currentPageNo-1}"
                                   aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>

                            <c:forEach begin="1" end="${commodityList.totalPageCount}" varStatus="status">
                                <c:if test="${status.index == commodityList.currentPageNo}">
                                    <li class="active"><a
                                            href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING,
                                            new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST,})%>&caid=${caid}&currentPageNo=${status.index}">
                                            ${status.index}</a>
                                    </li>
                                </c:if>
                                <c:if test="${status.index != commodityList.currentPageNo}">
                                    <li><a href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING,
                                            new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST,})%>&caid=${caid}&currentPageNo=${status.index}">
                                            ${status.index}</a>
                                    </li>
                                </c:if>
                            </c:forEach>

                            <li>
                                <a href="${pageContext.request.contextPath}<%=UrlUtil.getUrl(ShopServlet.REQUEST_MAPPING,
                                new String[]{ShopServlet.METHOD, ShopServlet.COMMODITY_LIST})%>&caid=${caid}&currentPageNo=${commodityList.currentPageNo+1}"
                                   aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>

                        </ul>
                    </nav>
                </c:if>
            </div>
        </div>
    </div>
</div>
<input id="mh-caid" name="caid" value="${requestScope.caid}" type="hidden">


<%@include file="/jsp/common/foot.jsp" %>
<script src="${pageContext.request.contextPath}/js/shop.js"></script>